//////////////////////////////添加动态加载效果////////////////////////////
let io = new IntersectionObserver(
    function (entries) {
        /**
         * target: 被观察的目标元素，是一个 DOM 节点对象
         * isIntersecting: 是否进入可视区域
         * intersectionRatio: 相交区域和目标元素的比例值，进入可视区域，值大于0，否则等于0
         */
        // 如果不可见，就返回, 相当于一直调用loadItem(), 直到 #sentinels 出现在视窗位置
        if (entries[0].intersectionRatio > 0) {
            let test = window.location.href;
            let ring = test.split("?ring=");
            if (ring.length === 2) {
                let url = 'article/pageGetPromulgatorArticle';
                ajaxPost(url, {
                    pageIndex: PAGE,
                    pageSize: SIZE,
                    promulgator: ring[1]
                }, function () {
                }, function (result) {
                    if (result.code === 200) {
                        let data = result.data;
                        loadItem(data);
                        PAGE++;
                    } else {
                        WarnAlert('请求数据失败, 请稍后重试');
                    }
                }, function () {
                    ErrorAlert('后台请求出错, 请稍后重试');
                });
            }
        }
    });

// 开始观察
io.observe(
    document.querySelector('#sentinels')
);

// 定制分页信息
let PAGE = 1, SIZE = 8;

/**
 * 指定加载Item
 * @param data 加载的数据
 */
function loadItem(data) {
    let $content = $('#search_content .content_area').eq(0);
    // 第一次加载清空DOM
    if (PAGE === 1) {
        $content.empty();
    }
    let html = '', len = document.querySelectorAll('.diary_cover').length;
    for (let i = 0; i < data.length; i++) {
        let v = data[i];
        html += '<div class="diary_item">' +
            '<div class="diary_cover">' +
            '<div class="cover">' +
            '<div class="cover_content">' +
            '<div class="title" data-id="' + v.articleKey + '">' + v.title + '</div>' +
            '<div class="introduce">' + v.paper + '</div>' +
            '<div class="archive"><i class="iconfont icon-guidang"></i>' + v.iarchive + '</div>' +
            '</div>' +
            '<div class="diary_info">' +
            '<div class="diary_statistics">' +
            '<span class="statistics_block">' +
            '<i class="iconfont icon-yuedu1"></i>' + v.views +
            '</span>' +
            '<span class="statistics_block">' +
            '<i class="iconfont icon-zan"></i>' + v.likes +
            '</span>' +
            '</div>' +
            '<div class="author" data-id="' + v.createBy + '" data-value="' + v.creatorName + '">' +
            '<i class="iconfont icon-nanren1"></i>' +
            '</div>' +
            '</div>' +
            '</div>' +
            '</div>' +
            '</div>';
    }
    $content.append(html);
    let $diaryCover = document.querySelectorAll('.diary_cover');
    for (let i = len; i < len + data.length; i++) {
        lazyLoad($diaryCover[i]);
    }
    PAGE++;
}


////////////////////////////////////diary下拉逐渐加载效果/////////////////////////////////////
// const con = document.querySelector('#container');
const imgs = document.querySelectorAll('.diary_cover');

const options = {
    // root属性指定目标元素所在的容器节点（即根元素）。注意，容器元素必须是目标元素的祖先节点。
    // root: con,
    // threshold属性决定了什么时候触发回调函数。它是一个数组，每个成员都是一个门槛值，默认为[0]，
    // 即交叉比例（intersectionRatio）达到0时触发回调函数。
    // 比如，[0, 0.25, 0.5, 0.75, 1]就表示当目标元素 0%、25%、50%、75%、100% 可见时，会触发回调函数。
    threshold: 0.25,
    // 定义根元素的margin，用来扩展或缩小rootBounds这个矩形的大小，从而影响intersectionRect交叉区域的大小。
    // 它使用CSS的定义方法，比如10px 20px 30px 40px，表示 top、right、bottom 和 left 四个方向的值。
    // 这样设置以后，不管是窗口滚动或者容器内滚动，只要目标元素可见性变化，都会触发观察器。
    rootMargin: '0px'
};

/**
 * 采用 IntersectionObserver 低级优先级的监听来监听div('scroll-con)和目标元素(target=>img)是否出现交集的判断,
 * 触发回调, 将真实图片资源加载
 * @param target 目标DOM
 */
function lazyLoad(target) {
    // document.body.clientHeight; 视窗高度
    // console.log(cover.offsetHeight);
    // console.log(cover.offsetTop);
    const io = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const cover = entry.target;
                cover.classList.add('fadeIn');
                console.log('是的, 我要给你添加新元素搞事情了...');
                observer.disconnect();
            }
        });
    }, options);
    // 开始观察 target, 若是达到了 options 配置, 则触发
    if (target) {
        io.observe(target);
    }
}

// imgs.forEach(lazyLoad);


///////////////////////////////页面title效果/////////////////////////////////